<script setup lang="ts">
import {ref,computed} from 'vue'
import {uploadImage} from '../api/tools'
import {productCreate} from "../api/product.ts";
import {UploadFilled} from "@element-plus/icons-vue"

const imageFileList = ref([])
const category = ref()
const quantity = ref()
const price = ref()
const photoUrlList = ref<string[]>([]);
const photoUrl = ref('')
const productName = ref('')
const createDisabled = computed(() => !productName.value || !category.value || !quantity.value || !price.value|| imageFileList.value.length < 2)
function handleChange(file: any, fileList: any) {
  imageFileList.value = fileList
  let formData = new FormData()
  formData.append('file', file.raw)
  uploadImage(formData).then(res => {
    photoUrl.value = res.data.result
    photoUrlList.value.push(photoUrl.value)
    console.log(photoUrlList.value)
  })
}

function handleRemove(file: any, fileList: any){
  imageFileList.value = fileList
  let formData = new FormData()
  formData.append('file', file.raw)
  uploadImage(formData).then(res => {
    photoUrl.value = res.data.result
    var index = photoUrlList.value.indexOf(photoUrl.value)
    photoUrlList.value.splice(index,1)
  })

}

function uploadHttpRequest() {
  return new XMLHttpRequest()
}

function newProduct(){


  productCreate({
        name : productName.value,
        category : category.value,
        photoUrl : photoUrlList.value,
        quantity : quantity.value,
        price : price.value
      }
  ).then(res => {
        if (res.data.code === '000') {
          ElMessage({
            message: "创建商品成功",
            type: 'success',
            center: true,
          })
          imageFileList.value = []
          productName.value = ""
          category.value = ""
          photoUrlList.value = []
          quantity.value = null
          price.value = null
        }
        else {
          ElMessage({
            message: "创建失败",
            type: 'error',
            center: true,
          })
        }
      }
  )

}
</script>


<template>
  <el-main class="product-creation">
    <el-form class="product-form">
      <el-form-item label="商品图片">
        <el-upload
            v-model:file-list="imageFileList"
            :on-change="handleChange"
            :on-remove="handleRemove"
            class="upload-demo"
            list-type="picture"
            :http-request="uploadHttpRequest"
            drag
        >
          <el-icon class="el-icon--upload">
            <upload-filled />
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处或单击此处上传。至少上传两份文件。
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item class="input-section" label="商品名">
        <el-input class="product-name" v-model="productName"></el-input>
      </el-form-item>

      <el-form-item class="input-section" label="商品种类">
        <el-select
            v-model="category"
            placeholder="请选择"
            style="width: 100%;"
        >
          <el-option value="0" label="食品"></el-option>
          <el-option value="1" label="服饰"></el-option>
          <el-option value="2" label="家具"></el-option>
          <el-option value="3" label="电子产品"></el-option>
          <el-option value="4" label="娱乐"></el-option>
          <el-option value="5" label="体育产品"></el-option>
          <el-option value="6" label="奢侈品"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="input-section" label="商品数量">
        <el-input-number v-model="quantity"></el-input-number>
      </el-form-item>

      <el-form-item class="input-section" label="商品单价">
        <el-input-number v-model="price" :precision="2"></el-input-number>
      </el-form-item>

      <el-button
          class="create-button"
          :disabled="createDisabled"
          @click.prevent="newProduct"
      >
        创建
      </el-button>
    </el-form>
  </el-main>
</template>


<style scoped>
.product-creation {
  padding: 20px;
}

.product-form {
  max-width: 500px;
  margin: 0 auto;
}

.input-section {
  margin-bottom: 20px;
}

.create-button {
  width: 100%;
}
</style>